<!--<template>-->
<!--  <div>-->
<!--    更换头像-->
<!--    <el-upload-->
<!--      ref="upload"-->
<!--      class="avatar-uploader"-->
<!--      action="http://localhost:8080/avatarUpload"-->
<!--      :show-file-list="false"-->
<!--      :on-success="handleAvatarSuccess"-->
<!--      :before-upload="beforeAvatarUpload"-->
<!--      :auto-upload="false"-->
<!--      :data="empId"-->
<!--    >-->
<!--      <img v-if="imageUrl" :src="imageUrl" class="avatar">-->
<!--      <i v-else class="el-icon-plus avatar-uploader-icon" />-->
<!--    </el-upload>-->
<!--    <el-button @click="handleUpload">上传</el-button>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--export default {-->
<!--  name: 'Test',-->
<!--  data() {-->
<!--    return {-->
<!--      imageUrl: '',-->
<!--      empId: {-->
<!--        empId: 'SX1001'-->
<!--      }-->
<!--    }-->
<!--  },-->
<!--  methods: {-->
<!--    handleAvatarSuccess(res, file) {-->
<!--      this.imageUrl = URL.createObjectURL(file.raw)-->
<!--    },-->
<!--    beforeAvatarUpload(file) {-->
<!--      const isJPG = file.type === 'image/jpeg'-->
<!--      const isLt2M = file.size / 1024 / 1024 < 2-->

<!--      if (!isJPG) {-->
<!--        this.$message.error('上传头像图片只能是 JPG 格式!')-->
<!--      }-->
<!--      if (!isLt2M) {-->
<!--        this.$message.error('上传头像图片大小不能超过 2MB!')-->
<!--      }-->
<!--      return isJPG && isLt2M-->
<!--    },-->
<!--    handleUpload() {-->
<!--      this.$refs.upload.submit()-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</script>-->
<!--<style>-->
<!--.avatar-uploader .el-upload {-->
<!--  border: 1px dashed #d9d9d9;-->
<!--  border-radius: 6px;-->
<!--  cursor: pointer;-->
<!--  position: relative;-->
<!--  overflow: hidden;-->
<!--}-->
<!--.avatar-uploader .el-upload:hover {-->
<!--  border-color: #409EFF;-->
<!--}-->
<!--.avatar-uploader-icon {-->
<!--  font-size: 28px;-->
<!--  color: #8c939d;-->
<!--  width: 178px;-->
<!--  height: 178px;-->
<!--  line-height: 178px;-->
<!--  text-align: center;-->
<!--}-->
<!--.avatar {-->
<!--  width: 178px;-->
<!--  height: 178px;-->
<!--  display: block;-->
<!--}-->
<!--</style>-->
<!--<template>-->
<!--  <div>-->
<!--    <el-upload-->
<!--      class="upload-demo"-->
<!--      action="#"-->
<!--      name="file"-->
<!--      :http-request="requestUpload"-->
<!--      :before-upload="beforeAvatarUpload"-->
<!--      :on-success="handleSuccess"-->
<!--      multiple-->
<!--    />-->
<!--    <quill-editor-->
<!--      :ref="toref"-->
<!--      v-model="content"-->
<!--      @change="$emit('input', content)"-->
<!--      :options="editorOption"-->
<!--      style="height:400px;margin-bottom: 80px"-->
<!--    ></quill-editor>-->
<!--  </div>-->
<!--</template>-->
<!--<script>-->
<!--import 'quill/dist/quill.core.css'-->
<!--import 'quill/dist/quill.snow.css'-->
<!--import 'quill/dist/quill.bubble.css'-->

<!--import 'quill/dist/quill.snow.css'-->
<!--import { quillEditor, Quill } from 'vue-quill-editor'-->
<!--import { container, ImageExtend, QuillWatch } from 'quill-image-extend-module'-->
<!--import { upload } from '@/api/news'-->

<!--Quill.register('modules/ImageExtend', ImageExtend)-->
<!--export default {-->
<!--  components: {-->
<!--    quillEditor-->
<!--  },-->
<!--  data() {-->
<!--    return {-->
<!--      editorOption: {-->
<!--        editorOption: { // 富文本框参数设置-->
<!--          modules: {-->
<!--            ImageExtend: {-->
<!--              loading: true,-->
<!--              name: 'img',-->
<!--              action: 'http://127.0.0.1:8080/avatarUpload',-->
<!--              response: (res) => {-->
<!--                return `http://127.0.0.1:8080/image/${res.data.filename}`-->
<!--              }-->
<!--            },-->
<!--            toolbar: {-->
<!--              container: container,-->
<!--              handlers: {-->
<!--                'image': function() {-->
<!--                  console.log('图片上传')-->
<!--                  QuillWatch.emit(this.quill.id)-->
<!--                }-->
<!--              }-->
<!--            }-->
<!--          }-->
<!--        }-->
<!--      },-->
<!--      content: ''-->
<!--    }-->
<!--  },-->
<!--  methods: {-->
<!--    submit() {-->
<!--      upload(this.content).then(response => {-->
<!--        console.log(response)-->
<!--      })-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</script>-->

<template>
  <div>
    <el-upload
      class="upload-demo"
      action="#"
      name="file"
      :http-request="requestUpload"
      :before-upload="beforeAvatarUpload"
      :on-success="handleSuccess"
      multiple
    />
    <quill-editor
      :ref="toref"
      v-model="content"
      :options="editorOption"
      style="height:400px;margin-bottom: 80px"
      @change="$emit('input', content)"
    />
  </div>
</template>
<script>
import { quillEditor } from 'vue-quill-editor'
import { uploadImg } from '@/api/news'

export default {
  components: {
    quillEditor
  },
  props: {
    value: {
      type: String
    },
    toref: {
      type: String,
      default: 'quillEditor'
    },
    quillIndex: {
      type: Number,
      default: 0
    }
  },
  data() {
    const toolbarOptions = [
      ['bold', 'italic', 'underline', 'strike'], // toggled buttons
      ['blockquote', 'code-block'],

      [{ header: 1 }, { header: 2 }], // custom button values
      [{ list: 'ordered' }, { list: 'bullet' }],
      [{ script: 'sub' }, { script: 'super' }], // superscript/subscript
      [{ indent: '-1' }, { indent: '+1' }], // outdent/indent
      [{ direction: 'rtl' }], // text direction

      [{ size: ['small', false, 'large', 'huge'] }], // custom dropdown
      [{ header: [1, 2, 3, 4, 5, 6, false] }],

      [{ color: [] }, { background: [] }], // dropdown with defaults from theme
      [{ font: [] }],
      [{ align: [] }],
      ['link', 'image', 'video'],
      ['clean'] // remove formatting button
    ]
    return {
      quillIndex1: 1,
      content: this.value,
      editorOption: {
        placeholder: '编辑内容',
        modules: {
          toolbar: {
            container: toolbarOptions,
            handlers: {
              image: (value) => {
                if (value) {
                  const index = this.quillIndex
                  // 这是是为了获取你当前点击的那个富文本框
                  document.querySelectorAll('.upload-demo input')[index].click()
                } else {
                  this.quill.format('image', false)
                }
              }
            }
          }
        }
      }
    }
  },
  watch: {
    value: function() {
      this.content = this.value
    }
  },
  methods: {
    requestUpload(params) {
      const formData = new FormData()
      formData.append('file', params.file)
      uploadImg(formData).then(res => {
        params.onSuccess(res)
        this.msgSuccess('上传成功')
      })
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg ' || 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG , PNG格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    handleSuccess(res, file) {
      // alert(JSON.stringify(res));
      // 获取富文本组件实例
      // let quill = this.$refs.myTextEditor.quill;
      // 如果上传成功
      if (res) {
        // 动态添加 ref  通过 eval () 去执行
        const toeval = 'this.$refs.' + this.toref + '.quill'
        // eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。
        const quill = eval(toeval)
        console.log(quill)
        // 获取光标所在位置
        const length = quill.selection.savedRange.index
        // 插入图片，res为服务器返回的图片链接地址
        quill.insertEmbed(length, 'image', res.url)
        // 调整光标到最后
        quill.setSelection(length + 1)
      } else {
        // 提示信息，需引入Message
        this.$message.error('图片插入失败')
      }
      // this.form.unscramble = res.fileName;
    }
  }
}

</script>
